<template>
  <div style="height: 100%;">
    <!--头部-->
    <HeaderStatic v-show="type !== 'wpf'"></HeaderStatic>
    <!--导航-->
    <NavStatic v-show="type !== 'wpf'"></NavStatic>
    <!--主体-->
    <router-view class="main-controller-body" :class="{'wpf':type === 'wpf'}" />
    <!--信息提示框-->
    <messageDialog v-model="visible"></messageDialog>
    <!--加载-->
    <logging></logging>
    <loading :visible="getLoading"></loading>
    <div :style="{top:setTop+'px'}"
         :class="[{'help-wrap':isHover},{'help-doc':!isHover}]"   ref="helpDiv">{{helpDoc}}</div>
    <!--v-text="helpDoc"-->
<!--    <span :style="{top:spanTop}"
          :class="{'help-doc':spanShow}"
          class="help-wrap-span"></span>-->
  </div>
</template>

<script>
  import HeaderStatic from "../header/HeaderStatic";
  import NavStatic from "../nav/NavStatic";
  import messageDialog from '@/components/dialog/messageDialog'
  import loading from '@/components/modalWindow/loading'
  import logging from '@/components/dialog/logging'


  export default {
    name: "IndexStatic",
    data(){
      return {
        initData:{},
        type: '',
        visible: false,
        txt: '',
        breadcrumb: '',
        breadcrumbCN: '',
        helpDoc: "I'm help document",
        isHover: false,
        spanShow: false,
        setTop: 0,
        spanHeight: 0,
      }
    },
    components:{
      HeaderStatic,
      NavStatic,
      messageDialog,
      logging,
      loading
    },
    created(){
      this.initFn();
    },
    computed: {
      getMessageObj () {
        return this.$store.state.messageDialogObj;
      },
      isShowHelp () {
        return this.$store.state.helpMessage;
      },
      spanTop () {
        return (this.setTop)+'px';
      },
      getLoading () {
        return this.$store.state.loading
      }
    },
    mounted(){
      //拖动
    /*  $(function(){
        $(".modal-ctrl-main .modal-title").on("mousedown",function(eve){
          let e = eve || window.event;
          let _this = $(this);
          let sX = e.clientX;
          let sY = e.clientY;
      /!*    console.log("偏移："+sX);
          console.log("偏移："+sY);*!/
        $(document).on("mousemove",function(eve){
              let e = eve || window.event;
              let pX = e.clientX;
              let pY = e.clientY;
              console.log(x);
              console.log(y);
              /!*        console.log("移动："+pX);
                      console.log("移动："+pY);*!/
                 _this.parents(".modal-ctrl-main").css({
                   "transform":"translate("+ x+(pX - sX) +"px,"+ y+(pY - sY ) +"px)",
                 });
              $(document).on("mouseup",function(){
                $(document).unbind("mousemove");
              });
            });
          })
        });*/
    },
    methods: {
      initFn() {
        this.type = this.$route.query.type;
        //console.log(this.type);
        // console.log(this.$route.query);
        this.breadcrumb = sessionStorage.getItem("breadcrumb");
        this.switchHelp();
      },
      switchHelp () {
        ////console.log(this.breadcrumb);
        switch (this.breadcrumb) {
          case 'userController':
            this.breadcrumbCN = '用户管理';
            this.helpDoc = '用户管理界面主要是对用户信息进行操作。新增操作是为警员创建本系统用户，分为两种情况：一：为已有警员创建账号用于登陆此系统；二：新增用户同时新增警员，此时就需要填写更多字段。用户授权是给用户赋予角色，可多选，此用户就会拥有被赋予角色相对应的权限。';
            break;
          case 'policeController':
            this.breadcrumbCN = '警员管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'sectionController':
            this.breadcrumbCN = '部门管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'roleController':
            this.breadcrumbCN = '角色管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'jurisdictionController':
            this.breadcrumbCN = '权限因子管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'addressAdminController':
            this.breadcrumbCN = '通讯录管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'positionManageController':
            this.breadcrumbCN = '职位管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'loggingWriteController':
            this.breadcrumbCN = '日志管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'dictionaryController':
            this.breadcrumbCN = '字典管理';
            this.helpDoc = '字典管理界面分为两个部分：一、字典类型树；二、字典项列表；';
            break;
          case 'programLib':
            this.breadcrumbCN = '方案库';
            this.helpDoc = '方案库界面是对WPF客户端页面的管理。预览按钮可以查看所选择的方案详情；修改按钮是管理所选方案的基本信息，如果需要对方案中的菜单进行管理则需要点击维护按钮；点击维护按钮将跳转至对应方案的维护页面，维护页面可以对宫格中的菜单进行管理；在新建宫格下的菜单的时候如果需要新增菜单图片和链接则需要在素材链接库和素材图片库中先配置好。';
            break;
          case 'previewProgram':
            this.breadcrumbCN = '方案详情';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'menuLib':
              this.breadcrumbCN = '菜单管理';
              this.helpDoc = '菜单管理界面主要是管理使用后台获取菜单的系统。通过添加对应菜单和层次来配置相应系统页面的显示';
            break;
          case 'linkLib':
            this.breadcrumbCN = '素材链接库';
            this.helpDoc = '素材链接库界面主要为菜单管理页面和方案库-维护页面提供“链接”的选项，用为菜单提供链接地址数据。';
            break;
          case 'picLib':
            this.breadcrumbCN = '素材图片库';
            this.helpDoc = '素材图片库界面主要为菜单管理页面和方案库-维护页面提供“图片”的选项，用为菜单提供图标数据。';
            break;
          case 'dataObject':
            this.breadcrumbCN = '数据权限管理';
            this.helpDoc = '数据权限管理界面主要为数据权限提供增删改查。';
            break;
          case 'VehicleController':
            this.breadcrumbCN = '警车管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'RadioController':
            this.breadcrumbCN = '手台管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'MonitorController':
            this.breadcrumbCN = '单兵管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'AppController':
            this.breadcrumbCN = '警务通管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'OldDotController':
            this.breadcrumbCN = '1.0点资源管理管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'OldLineController':
            this.breadcrumbCN = '1.0线资源管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'OldFaceController':
            this.breadcrumbCN = '1.0面资源管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'CameraController':
            this.breadcrumbCN = '摄像头管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'WIFIController':
            this.breadcrumbCN = 'WIFI探针管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'PersonnelController':
            this.breadcrumbCN = '人员流动管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'SiteController':
            this.breadcrumbCN = '场所管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'VenueController':
            this.breadcrumbCN = '场馆管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'UnitsController':
            this.breadcrumbCN = '党政机关';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'AirportsAndRailwayStationsController':
            this.breadcrumbCN = '一场四站管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'DomicileController':
            this.breadcrumbCN = '住地管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'HeadquartersController':
            this.breadcrumbCN = '指挥部管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'CircuitController':
            this.breadcrumbCN = '安保线路管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'ThreeCircleController':
            this.breadcrumbCN = '三圈管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'TrafficControlLoopController':
            this.breadcrumbCN = '封控圈管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'areaController':
            this.breadcrumbCN = '辖区管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'IconController':
            this.breadcrumbCN = '图标管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'keyCarConstroller':
            this.breadcrumbCN = '车辆管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'keyPersonConstroller':
            this.breadcrumbCN = '人员管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'keyPersonListController':
            this.breadcrumbCN = '重点人管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'keyPersonClassController':
            this.breadcrumbCN = '重点人类型';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'CaseResourceController':
            this.breadcrumbCN = '预案资源管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          case 'CaseListController':
            this.breadcrumbCN = '预案管理';
            this.helpDoc = '警员管理界面主要是对警员信息进行操作';
            break;
          default:
            break;
        }
      }
    }, // methods end
    watch:{
      $route: {
        handler:function (val, oldVal) {
         // //console.log(val);
          // this.breadcrumb = val.fullPath.replace('/','');
          // this.switchHelp();
        }
      },
      getMessageObj: {
        handler: function(val){
          this.visible = val.visible;
          this.txt = val.txt;
        },
        deep:true
      },
      isShowHelp: {
        handler: function(val){
          let self = this;
          this.isHover = val.isShow;
          this.breadcrumb = val.url;
          this.setTop = val.offsetTop;
          this.$nextTick(function(){
            self.spanHeight = $(this.$refs.helpDiv).eq(0).height();
            self.spanShow = !val.isShow;
          })
          this.switchHelp();
          sessionStorage.setItem('breadcrumb', this.breadcrumb);
          ////console.log(this.setTop)
        },
        deep:true
      }
    }
  }
</script>

<style scoped>

.wpf {
  padding: 0;
}

/*  .fadeInRight,.fadeInRight{
    animation-duration: .500s;
  }*/
  .help-wrap {
    position: absolute;
    width: 300px;
    top: 0px;
    left: 200px;
    margin-left: -30px;
    padding: 4px 10px;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 4px;
    background-color: #DCDFE6;
    color: #303133;
    z-index: 10;
  }
  .help-wrap-span {
    display: block;
    position: absolute;
    left: 158px;
    width: 0;
    height: 0;
    border-right: 14px solid #DCDFE6;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    content: "";
    z-index: 10;
  }
  .help-doc {
    display: none;
  }
</style>
